<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue兄弟组件间的传值</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        父组件

        <div>
            <button v-on:click='destory'>销毁</button>
        </div>
        <p>-------------------------------</p>
        <view-tom></view-tom>

        <p>--------------------------</p>
        <view-jerry></view-jerry>
    </div>
    <script>

        // 创建一个中间事件管理对象
        var vub = new Vue()

        Vue.component('view-tom', {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `
            <div>
                TOM:
                <div>{{num}}</div>
                <div>
                    <button v-on:click='handle'>点击</button>
                </div>
            </div>`,
            methods: {
                handle: function () {
                    // 向兄弟组件触发事件
                    vub.$emit('event-jerry', 2)
                }
            },
            mounted() {
                // 组件挂载后注册监听事件
                var that = this
                vub.$on('event-tom', function (val) {
                    that.num += val
                })
            },
        })

        Vue.component('view-jerry', {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `
            <div>
                JERRY:
                <div>{{num}}</div>
                <div>
                    <button v-on:click='handle'>点击</button>
                </div>
            </div>`,
            methods: {
                handle: function () {
                    // 向兄弟组件触发事件
                    vub.$emit('event-tom', 4)
                }
            },
            mounted() {
                var that = this
                // 子组件挂载后注册事件
                vub.$on('event-jerry', function (val) {
                    that.num += val
                })
            },
        })


        var vm = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            methods: {
                destory: function () {
                    // 销毁组件注册的监听事件
                    vub.$off('event-jerry')
                    vub.$off('event-tom')
                }
            },
        })
    </script>
</body>

</html>

<!-- 兄弟组件之间传值  组件挂载的时候 相互注册监听事件 相互发送触发事件 -->